<template>
  <div class="page-db">
    <div class="db-item" v-for="(item,index) in imgs" :key="index">
      <img :src="item" />
    </div>
    <div class="db-item db-2"><img :src="db2" @click="scale()"/></div>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade" position="center" class="pop-wrap mi-wrap" >
      <div class="pop-con"><img :src="db2"></div>
    </mt-popup>
  </div>
</template>

<script>
import { Popup } from "mint-ui";
export default {
  name: "icp",
  data() {
    return {
      popupVisible: false,
      db2: require("@/public/imgs/evaluation/db-info.jpg"),
      imgs: [
        require("@/public/imgs/evaluation/d-b-1.png"),
        require("@/public/imgs/evaluation/d-b-2.png"),
        require("@/public/imgs/evaluation/d-b-3.png")
      ]
    };
  },
  methods: {
    scale() {
      this.popupVisible = true;
      this.eventDefault(".mi-wrap");
    },
    eventDefault(selector) {
      //弹出框 页面滚动穿透解决
      this.$nextTick(function() {
        var vModel = document.querySelector(selector);
        vModel.addEventListener("touchmove", function(e) {
          e.preventDefault();
        });
      });
    }
  }
};
</script>

<style lang="less">
.page-db {
  .icp-item {
    img {
      display: block;
      max-width: 100%;
      width: 100%;
      border: 0;
      margin: 0;
    }
  }
  .db-2 {
    padding: 0 50px;
    margin: 40px 0 60px;
    img {
      box-shadow: 5px 5px 20px rgba(221,221,221,0.5);
    }
  }
  .pop-wrap {
    padding: 0 40px;
    width: 100%;
    background: rgba(255, 255, 255, 0);
    box-sizing: border-box;
  }
}
</style>
